<style type="text/css">
table {
    background-color: #FFF;
    border: none;
    color: #565;
    font: 12px arial;
}

table caption {
    font-size: 24px;
    border-bottom: 2px solid #B3DE94;
    border-top: 2px solid #B3DE94;
}

table, td, th {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align:left;
}

tbody td, tbody th {
    background-color: #DFC;
    border-bottom: 2px solid #B3DE94;
    border-top: 3px solid #FFFFFF;
    padding: 9px;
}


tfoot td, tfoot th {
    font-weight: bold;
    padding: 4px 8px 6px 9px;
    text-align:center;
}

thead th {
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
    padding: 0 8px 2px;
    text-align:center;
}

tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/
    background-color: #CEA;
    border-bottom: 2px solid #67BD2A;
}

td+td+td, /*第三个td以及之后的td元素*/
col.price{ /*类样式*/
    text-align:right;
}

tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/
    background-color: #8b7;
    color:#fff;
}

</style>

<table  border="3" width="80%" height="80"  bordercolor="cornflowerblue">
    <tr>
        #for(k:keys)
        <td>#(k)</td>
        #end
    </tr>

#for(r:ret)
<tr align="center">
    #for(k:keys)
    <td>#(r.get(k))</td>
    #end
</tr>
#end
</table>

<table  border="3" width="80%" height="80"  bordercolor="cornflowerblue">
    <caption><h1>#(title ??)</h1></caption>
    <tr align="center"  bgcolor="pink">
        #for(col:cols)
        <th>#(col ??)</th>
        #end
    </tr>

    #for(r:ret)
    <tr align="center">
    #for(col:cols)
        <td>#(r.get(col))</td>
    #end
    </tr>
    #end
</table>
